<template>
  <div class="recommend">
    <!-- 搜索 -->
    <van-search
      class="search_my"
      v-model="value"
      shape="round"
      placeholder="请输入搜索关键词"
    />
    <!-- 个性电台 -->
    <div class="selfhood">
      <div class="title">
        <h2>Hi {{nickname}} 今日为你打造</h2>
      </div>
      <div class="box">
        <div class="sliding">
          <div class="sliding_one">
            <div class="box_img">
              <img
                src="../../assets/recommend/images/selfhood_03.jpg"
                alt=""
              >
            </div>
            <div class="box_title">
              <h3>个性电台</h3>
            </div>
          </div>
          <div>
            <div class="box_img">
              <img
                src="../../assets/recommend/images/selfhood_05.jpg"
                alt=""
              >
            </div>
            <div class="box_title">
              <h3>每日30首</h3>
            </div>
          </div>
          <div>
            <div class="box_img">
              <img
                src="../../assets/recommend/images/selfhood3_03.jpg"
                alt=""
              >
            </div>
            <div class="box_title">
              <h3>百万收藏</h3>
            </div>
          </div>
          <div>
            <div class="box_img">
              <img
                src="../../assets/recommend/images/selfhood2_03.jpg"
                alt=""
              >
            </div>
            <div class="box_title">
              <h3>新歌推荐</h3>
            </div>
          </div>
          <div>
            <div class="box_img">
              <img
                src="../../assets/recommend/images/selfhood2_05.jpg"
                alt=""
              >
            </div>
            <div class="box_title">
              <h3>k歌不停</h3>
            </div>
          </div>
          <div>
            <div class="box_img">
              <img
                src="../../assets/recommend/images/selfhood2_07.jpg"
                alt=""
              >
            </div>
            <div class="box_title">
              <h3>好友热播</h3>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 歌单传送门 -->
    <div class="selfhood song">
      <div class="title title-flex">
        <h2>歌单传送门</h2>
        <span class="tlt-text-some">
          <i>更多</i>
          <van-icon name="arrow" />
        </span>
      </div>
      <div class="box">
        <div
          class="sliding"
          v-for="(play,index) in playlist"
          :key="index"
        >
          <div
            v-for="item in play"
            :key="item.content_id"
            @click="goTo(item.content_id)"
          >
            <div class="box_img">
              <img
                v-lazy="item.cover"
                alt=""
              >
              <div class="box_img_title">
                <van-icon
                  name="play"
                  color="#fff"
                />
                <span>{{(item.listen_num / 10000).toFixed(1)}}万</span>
              </div>
            </div>
            <div class="box_title">
              <h3>{{item.title}}</h3>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 大家都在听 -->
    <div class="selfhood everyone">
      <div class="title title-flex">
        <h2>大家都在听</h2>
        <span>
          <van-icon
            name="play"
            color="#31cd9d"
            size="16px"
          />
          播放
        </span>
      </div>
      <div class="box">
        <div class="sliding">
          <div class="everyone_div">
            <div class="everyone_box">
              <img
                src="../../assets/recommend/images/ting_03.jpg"
                alt=""
              >
            </div>
            <div class="everyone_text">
              <h3>Sky(Radio Edit)</h3>
              <span>Steerner-Sky(Radio Edit)</span>
            </div>
          </div>
          <div class="everyone_div">
            <div class="everyone_box">
              <img
                src="../../assets/recommend/images/ting1_03.jpg"
                alt=""
              >
            </div>
            <div class="everyone_text">
              <h3>哪个男孩</h3>
              <span>汪苏泷-哪个男孩</span>
            </div>
          </div>
        </div>
        <div class="sliding">
          <div class="everyone_div">
            <div class="everyone_box">
              <img
                src="../../assets/recommend/images/ting_06.jpg"
                alt=""
              >
            </div>
            <div class="everyone_text">
              <h3>牵丝戏</h3>
              <span>洛天依-洛天依作品集</span>
            </div>
          </div>
          <div class="everyone_div">
            <div class="everyone_box">
              <img
                src="../../assets/recommend/images/ting1_06.jpg"
                alt=""
              >
            </div>
            <div class="everyone_text">
              <h3>永远同在</h3>
              <span>井上杏美-宫崎骏电影主题曲全集</span>
            </div>
          </div>
        </div>
        <div class="sliding">
          <div class="everyone_div">
            <div class="everyone_box">
              <img
                src="../../assets/recommend/images/ting_08.jpg"
                alt=""
              >
            </div>
            <div class="everyone_text">
              <h3>The Calling(Da T weekaz Remix)</h3>
              <span>The FatRat-Classics Remixed</span>
            </div>
          </div>
          <div class="everyone_div">
            <div class="everyone_box">
              <img
                src="../../assets/recommend/images/ting1_08.jpg"
                alt=""
              >
            </div>
            <div class="everyone_text">
              <h3>フンフンフン</h3>
              <span>神前</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <router-view></router-view>
  </div>
</template>
<script>
import Vue from 'vue';
import { Lazyload } from 'vant';
Vue.use(Lazyload);
export default {
  data: () => ({
    value: '',
    nickname: '0_0',
    playlist: [],
  }),
  created() {
    this.getRecommendR()
  },
  methods: {
    async getRecommendR() {
      const res = await this.$http.getRecommendR()
      // console.log(res.data.response.recomPlaylist.data.v_hot)
      const reslist = res.data.response.recomPlaylist.data.v_hot
      const mIndex = reslist.length / 2
      this.playlist = [reslist.splice(0, mIndex), reslist]
    },
    goTo(id) {
      this.$router.push('/recommend/recomPlaylist/' + id)
    }
  }
}
</script>
<style lang="scss" scoped>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
// 公共字体样式
$h2_size: 18px;
$h3_size: 14px;
$h2_weight: 700;
$c_text1: rgba(26, 26, 26, 1);
$c_text2: rgba(26, 26, 26, 0.5);
.recommend {
  background: #fafafa;
  padding: 44px 10px 50px;
  // 个性电台
  .selfhood {
    width: 100%;
    overflow-y: auto;
    margin: 5px;
    .title {
      height: 33px;
      margin: 5px 0 3px;
      h2 {
        font-size: $h2_size;
        font-weight: $h2_weight;
        color: $c_text1;
      }
    }
    //滑动盒子
    .box {
      overflow-x: auto;
      .sliding {
        // width: 720px;
        // display: flex;
        white-space: nowrap;
        margin-bottom: 10px;
        > div {
          display: inline-block;
          width: 120px;
          margin: 0 3px;
          vertical-align: top;
          .box_img {
            width: 120px;
            height: 120px;
            position: relative;
            > img {
              width: 100%;
              height: 100%;
            }
          }
          .box_title {
            h3 {
              min-height: 18px;
              font-weight: 300;
              font-size: $h3_size;
              color: $c_text1;
              margin-top: 5px;
              line-height: $h3_size;
              white-space: normal;
              //文本(2)多行显示超出显示...
              overflow: hidden;

              text-overflow: ellipsis;

              display: -webkit-box;

              -webkit-box-orient: vertical;

              -webkit-line-clamp: 2;
            }
          }
        }
        .sliding_one {
          width: 245px;
          .box_img {
            width: 245px;
          }
        }
      }
    }
    /*自定义滚动条的伪对象选择器, CSS 可以隐藏滚动条*/
    .box::-webkit-scrollbar {
      display: none;
    }
  }
  // 歌单
  .song {
    .title-flex {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .tlt-text-some {
        width: 41px;
        font-size: 12px;
        color: $c_text2;
        display: flex;
        justify-content: space-between;
        align-items: center;
        i {
          font-style: normal;
        }
      }
    }
    .box_img_title {
      position: absolute;
      bottom: 0;
      right: 0;
      display: -webkit-box;
      -webkit-box-pack: center;
      -webkit-box-align: center;
      height: 17px;
      min-width: 14px;
      padding: 0 7px;
      border-radius: 9px;
      background: rgba(0, 0, 0, 0.4);
      span {
        display: block;
        margin-left: 2px;
        line-height: normal;
        font-size: 11px;
        font-weight: 300;
        color: #fff;
      }
    }
  }
  //大家都在听
  .everyone {
    .title-flex {
      display: flex;
      span {
        margin-left: 10px;
        padding-right: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 50px;
        height: 25px;
        border-radius: 10px;
        font-size: 12px;
        background: rgba(49, 205, 157, 0.1);
      }
    }
    .everyone_div {
      width: 375px !important;
    }
    .everyone_box {
      float: left;
      height: 120px;
      margin-right: 9px;
      img {
        width: 120px;
        height: 100%;
      }
    }
    .everyone_text {
      float: left;
      display: flex;
      height: 120px;
      flex-direction: column;
      justify-content: center;
      h3 {
        font-size: 16px;
        color: $c_text1;
        margin-bottom: 10px;
      }
      span {
        color: $c_text2;
        font-size: 14px;
      }
    }
  }
}
</style>
